<template>
    <!-- 优化相册组件 -->
    <!-- 侧边 | 相册的列表 -->
    <li class="list-group-item list-group-item-action d-flex" style="cursor: pointer;" @click="albumsChange(index)"
        :class="{ 'active albumsActive': active }">
        {{ item.name }}

        <span class="btn btn-ligth btn-sm border ml-auto" v-if="!showOptions">
            {{ item.count }}
        </span>

        <el-dropdown class="ml-auto" v-else>
            <span class="btn btn-ligth btn-sm border">
                {{ item.count }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.stop.native="$emit('edit', { item, index })">修改</el-dropdown-item>
                <el-dropdown-item @click.stop.native="$emit('del', index)">删除</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>

    </li>
</template>
<script>
export default {
    // 接收人传递的参数
    props: {
        active: {
            type: Boolean,
            default: false,
        },
        item: Object,
        index: Number,

        showOptions: {
            type: Boolean,
            default: true
        }
    },
    methods: {
        // 全局监听方法
        // 或者可以将方法名改成@click="$emit('albumsChange', index)"
        albumsChange(index) {
            this.$emit('change', index)
        },
    }
}
</script>
<style></style>